<template>
	<view class="v-circle-progress">
		<view class="v-circle-progress__left">
			<view
				class="v-circle-progress__left__circle"
				:style="[leftSyle]"
				ref="left-circle"
			>
			</view>
		</view>
		<view class="v-circle-progress__right">
			<view
				class="v-circle-progress__right__circle"
				ref="right-circle"
				:style="[rightSyle]"
			>
			</view>
		</view>
		<view class="v-circle-progress__circle"> </view>
	</view>
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin("animation");
// #endif
/**
 * CircleProgress 圆形进度条 TODO: 待完善
 * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度环。
 * @property {String | Number}	percentage	圆环进度百分比值，为数值类型，0-100 (默认 30 )
 * @example
 */
export default {
	name: "v-circle-progress",
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			leftBorderColor: "rgb(200, 200, 200)",
			rightBorderColor: "rgb(200, 200, 200)",
		};
	},
	computed: {
		leftSyle() {
			const style = {};
			style.borderTopColor = this.leftBorderColor;
			style.borderRightColor = this.leftBorderColor;
			return style;
		},
		rightSyle() {
			const style = {};
			style.borderLeftColor = this.rightBorderColor;
			style.borderBottomColor = this.rightBorderColor;
			return style;
		},
	},
	mounted() {
		uni.$u.sleep().then(() => {
			this.rightBorderColor = "rgb(66, 185, 131)";
			// this.init()
		});
	},
	methods: {
		init() {
			animation.transition(
				this.$refs["right-circle"].ref,
				{
					styles: {
						transform: "rotate(45deg)",
						transformOrigin: "center center",
					},
				},
				() => {
					this.rightBorderColor = "rgb(66, 185, 131)";
					// animation.transition(this.$refs['right-circle'].ref, {
					// 	styles: {
					// 		transform: 'rotate(225deg)',
					// 		transformOrigin: 'center center'
					// 	},
					// 	duration: 3000,
					// }, () => {
					// 	animation.transition(this.$refs['left-circle'].ref, {
					// 		styles: {
					// 			transform: 'rotate(45deg)',
					// 			transformOrigin: 'center center'
					// 		},
					// 	}, () => {
					// 		this.leftBorderColor = 'rgb(66, 185, 131)'
					// 		animation.transition(this.$refs['left-circle'].ref, {
					// 			styles: {
					// 				transform: 'rotate(225deg)',
					// 				transformOrigin: 'center center'
					// 			},
					// 			duration: 1500,
					// 		}, () => {

					// 		})
					// 	})
					// })
				}
			);
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.v-circle-progress {
	@include flex(row);
	position: relative;
	border-radius: 100px;
	height: 100px;
	width: 100px;
	// transform: rotate(0deg);
	// background-color: rgb(66, 185, 131);
	background-color: rgb(200, 200, 200);
	overflow: hidden;
	justify-content: space-between;

	&__circle {
		border-radius: 100px;
		height: 90px;
		width: 90px;
		transform: translate(-50%, -50%);
		background-color: rgb(255, 255, 255);
		left: 50px;
		top: 50px;
		position: absolute;
	}

	&__left {
		position: absolute;
		left: 0;
		width: 50px;
		height: 100px;
		overflow: hidden;
		box-sizing: border-box;
		// background-color: rgb(66, 185, 131);
		// background-color: rgb(200, 200, 200);
		// transform-origin: left center;

		&__circle {
			box-sizing: border-box;
			// background-color: red;
			border-left-color: transparent;
			border-bottom-color: transparent;
			border-top-left-radius: 50px;
			border-top-right-radius: 50px;
			border-bottom-right-radius: 50px;
			// border-left-color: rgb(66, 185, 131);
			// border-bottom-color: rgb(66, 185, 131);
			border-top-color: rgb(66, 185, 131);
			border-right-color: rgb(66, 185, 131);
			border-width: 5px;
			width: 100px;
			height: 100px;
			transform: rotate(225deg);
			// border-radius: 100px;
		}
	}

	&__right {
		position: absolute;
		right: 0;
		width: 50px;
		height: 100px;
		overflow: hidden;

		&__circle {
			position: absolute;
			right: 0;
			box-sizing: border-box;
			// background-color: red;
			border-top-color: transparent;
			border-right-color: transparent;
			border-top-left-radius: 50px;
			border-bottom-left-radius: 50px;
			border-bottom-right-radius: 50px;
			// border-left-color: rgb(66, 185, 131);
			// border-bottom-color: rgb(66, 185, 131);
			border-left-color: rgb(200, 200, 200);
			border-bottom-color: rgb(200, 200, 200);
			border-width: 5px;
			width: 100px;
			height: 100px;
			transform: rotate(45deg);
			transform-origin: center center;
			// border-radius: 100px;
		}
	}
}
</style>
